<template>
  <section class="content">
    <Header title="成绩单">
      <div slot="left" @click="goBack" style="width: 100%;height: 100%;text-align: center;">
        <i class="iconfont icon-arrow-left" style="font-size: 22px"></i>
      </div>
    </Header>
    <div class="main">
      <div class="main_top">
        <div class="top_top">
          <p class="title">答题分数</p>
          <p class="score_box">
            <b>{{data.scores}}</b>
            <span>分</span>
          </p>
        </div>
        <div class="top_middle">
          <div class="btn" @click="goQus">查看解析</div>
        </div>
        <div style="padding: 0 15px;">
          <div class="top_bottom" style="border-bottom: 1px solid #d7d6dc;">
            <div class="left">
              <b>{{data.level}}</b>
              <p>评级)</p>
            </div>
            <div class="right">
              <b>{{data.usedMinutes}}</b>
              <p>用时(分钟)</p>
            </div>
          </div>
        </div>
        <div style="padding: 0 15px;">
          <div class="top_bottom">
            <div class="left">
              <b>{{data.total}}</b>
              <p>总题数(题)</p>
            </div>
            <div class="right">
              <b>{{data.corrected}}</b>
              <p>正确数量(题)</p>
            </div>
          </div>
        </div>
      </div>
      <div class="main_bottom"></div>
    </div>
  </section>
</template>
<script>
import Header from "../../components/Header/Header";
import {
  calendar_view,
  plan_view,
  chapter_view,
  dayly_view,
  exercise_view
} from "../../api/index.js";

let reqLis = {
  calendar: calendar_view,
  plan: plan_view,
  chapter: chapter_view,
  dayly: dayly_view,
  exercise: exercise_view
};

export default {
  data() {
    return {
      data: {}
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      let query = this.$router.history.current.query;
      let result = await reqLis[query.type]({ examId: query.id });
      if (result.code === 1) {
        this.data = result.data.info;
      } else {
        this.$vux.toast.show(`获取成绩单失败:${result.msg}`);
      }
    },
    goBack() {
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    goQus() {
      this.$router.push({
        path: "/question",
        query: { ...this.$router.history.current.query, status: 1 }
      });
    }
  },
  components: {
    Header
  }
};
</script>
<style lang="less" scoped>
@import "../../util/theme.less";

.content {
  .be-full();
  .main {
    width: 100%;
    height: calc(~"100% - 46px");
    position: relative;
    background: @white;
    overflow: auto;
  }
}

.main_top {
  background: @white;
  .top_top {
    width: 100%;
    height: 200px;
    background: url("../../assets/img/score_bg.png") no-repeat center center;
    background-size: 50% 80%;
    text-align: center;
    .mix-flex-center();
    flex-direction: column;
    .title {
      color: #000;
      font-size: 14px;
    }
    .score_box {
      b {
        font-size: 26px;
        color: red;
      }
      span {
        color: #000;
        font-size: 14px;
      }
    }
  }
  .top_middle {
    .mix-flex-center();
    margin-bottom: 10px;
    .btn {
      background: @red-bg;
      padding: 6px 40px;
      color: @red;
      border-radius: 4px;
    }
  }
  .top_bottom {
    .mix-flex-center();
    padding: 15px;
    .left,
    .right {
      flex: 1;
      .mix-flex-center();
      flex-direction: column;
      b {
        font-size: 16px;
      }
      p {
        font-size: 12px;
        color: @font-secondary;
      }
    }
    .left {
      border-right: 1px solid @border-base;
    }
  }
}
</style>
